<script setup lang="ts">
import { useMemberStore } from '@/stores'
import type { FillTwoForm } from '@/types/member'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

interface IEmits {
  (e: 'nextStep', value: { data: FillTwoForm; step: number }): void
}
const emits = defineEmits<IEmits>()

const dataForm = ref<FillTwoForm>({
  medicalHistory: [],
  insuranceType: '',
})
onShow(() => {
  setTimeout(() => {
    const memberStore = useMemberStore()
    if (!memberStore.fullForm) {
      return
    }
    dataForm.value = {
      medicalHistory: memberStore.fullForm.medicalHistory,
      insuranceType: memberStore.fullForm.insuranceType,
    }
    console.log(dataForm.value)
  }, 500)
})

// 处理选择疾病逻辑
const illnessHandle = (one: string) => {
  //无tag单击处理
  if (one === '无') {
    if (dataForm.value.medicalHistory.includes('无')) {
      dataForm.value.medicalHistory = []
    } else {
      dataForm.value.medicalHistory = []
      dataForm.value.medicalHistory.push('无')
    }
    return
  }

  //非无tag单击处理
  if (dataForm.value.medicalHistory.includes('无')) {
    dataForm.value.medicalHistory = []
  }
  if (dataForm.value.medicalHistory.includes(one)) {
    dataForm.value.medicalHistory = dataForm.value.medicalHistory.filter((item: string) => {
      if (one !== item) return item
    })
  } else {
    dataForm.value.medicalHistory.push(one)
  }
}

//处理选择保险逻辑
const insuranceTypeHandle = (one: string) => {
  dataForm.value.insuranceType = one
}

const submitHandle = () => {
  if (dataForm.value.medicalHistory.length > 0 && dataForm.value.insuranceType !== '') {
    emits('nextStep', { data: dataForm.value, step: 2 })
  }
}

const illnessList = [
  '高血压',
  '糖尿病',
  '心脏病',
  '脑梗',
  '脑出血',
  '脑中风',
  '白血病',
  '癫痫',
  '肾病',
  '其他',
  '无',
]

const insuranceTypeList = [
  '社会基本医疗保险',
  '商业医疗保险',
  '新型农村合作医疗',
  '大病统筹',
  '公费医疗',
  '城镇居民医疗保险',
  '其他',
  '无',
]
</script>

<template>
  <view class="info-2-container">
    <text class="title">填写疾病史与社保信息</text>
    <text class="desc">填写如下信息，以帮助医生了解您的身体基本情况，方便问诊开药</text>

    <view class="label">
      <u-icon name="info-circle-fill" size="20" color="#0764FD"></u-icon>
      <text>您是否患有或者患过以下疾病</text>
    </view>
    <view class="illness-tabs">
      <view
        class="tab"
        :key="one"
        v-for="one in illnessList"
        :class="dataForm.medicalHistory.includes(one) ? 'tab active' : 'tab'"
        @tap="illnessHandle(one)"
      >
        {{ one }}
      </view>
    </view>
    <view class="label">
      <u-icon name="info-circle-fill" size="20" color="#0764FD"></u-icon>
      <text>请选择您自己的社保类型</text>
    </view>
    <view class="insurance-tabs">
      <view
        v-for="one in insuranceTypeList"
        :key="one"
        :class="dataForm.insuranceType == one ? 'tab active' : 'tab'"
        @tap="insuranceTypeHandle(one)"
      >
        {{ one }}
      </view>
    </view>
    <view class="operate">
      <u-button
        type="primary"
        text="提交信息"
        size="large"
        color="#2074fd"
        @click="submitHandle"
      ></u-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.illness-tabs-wrap {
  flex-wrap: wrap;
  display: flex;
  .illness-tabs {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }
}
</style>
